<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>

<body>

<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>发表评论</b></font></h1>
</header>
<div class="mui-content">
	<div class="weui-cells weui-cell_access" style="margin-top: 0px">
		<div class="weui-cell" style="line-height:1">
			<div class="weui-cell__bd">
				<div class="weui-flex">
					<div class="weui-flex__item" style="flex-grow: 2">
						<p style="margin-bottom: 0px" >订单编号:&nbsp;&nbsp;<span  th:id="oid" th:text="${order.oid}"></span></p>
					</div>
					<div class="weui-flex__item" style="flex-grow: 1">
						<p style="margin-bottom: 0px" >服务顾问:&nbsp;&nbsp;<span th:id="servman" th:data="${order.servman}" th:text="${order.staffname}"></span></p>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-cell" style="line-height:1">
			<div class="weui-cell__bd">
				<p style="margin-bottom: 0px" >时间:&nbsp;&nbsp;<span th:text="${order.cometime}"></span></p>
			</div>
		</div>
	</div>
	<div class="weui-cells__title"></div><!--间隔一下-->
	<div class="weui-cells" style="margin-top: 0px">
		<div class="weui-flex" style="line-height:1;margin-top: 10px">
			<div class="weui-flex__item" style="margin-left: 10px">
				<h4 style="margin-bottom: 0px" >总评价:</h4>
			</div>
			<div class="weui-flex__item" >
				<div id="allcomment">
					<input type="image" name="imageField1" class="allcomment" src="/img/person/starlight.png" onclick="ChangeState(1,'allcomment','allcommentnum')"  style="width: 27px;height: 27px"/>
					<input type="image" name="imageField1" class="allcomment" src="/img/person/starlight.png" onclick="ChangeState(2,'allcomment','allcommentnum')"  style="width: 27px;height: 27px"/>
					<input type="image" name="imageField1" class="allcomment" src="/img/person/starlight.png" onclick="ChangeState(3,'allcomment','allcommentnum')"  style="width: 27px;height: 27px"/>
					<input type="image" name="imageField1" class="allcomment" src="/img/person/starlight.png" onclick="ChangeState(4,'allcomment','allcommentnum')" style="width: 27px;height: 27px"/>
					<input type="image" name="imageField1" class="allcomment" src="/img/person/starlight.png" onclick="ChangeState(5,'allcomment','allcommentnum')"  style="width: 27px;height: 27px"/>
				</div>
				<input id="allcommentnum"  type="hidden" value="5" size="1" maxlength="1"/>
			</div>
		</div>
		<div class="weui-cells weui-cells_form">
			<div class="weui-cell">
				<div class="weui-cell__bd">
					<textarea class="weui-textarea" id="textarea" placeholder="请您畅所欲言！" rows="3" style="padding: 0px"></textarea>
					<div class="weui-textarea-counter"><span id="count">0</span>/100</div>
				</div>
			</div>
			<!--上传图片-->
				<!--<div class="weui-uploader">-->
					<!--<div class="weui-uploader__hd">-->
						<!--<p class="weui-uploader__title" style="margin-left: 10px">上传图片</p>-->
					<!--</div>-->
					<!--<div class="weui-uploader__bd">-->
						<!--<div class="weui-uploader__input-box">-->
							<!--<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple=""/>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->
			<div class="weui-gallery" id="gallery">
				<span class="weui-gallery__img" id="galleryImg"></span>
				<div class="weui-gallery__opr">
					<a href="javascript:" rel="external nofollow" class="weui-gallery__del">
						<i class="weui-icon-delete weui-icon_gallery-delete"></i>
					</a>
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__bd">
					<div class="weui-uploader">
						<div class="weui-uploader__hd">
							<p class="weui-uploader__title">图片上传</p>
							<div class="weui-uploader__info"><span class="photonum">0</span>/4</div>
						</div>
						<div class="weui-uploader__bd">
							<ul class="weui-uploader__files" id="uploaderFiles">

							</ul>
							<div class="weui-uploader__input-box">
								<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="weui-cells__title"></div><!--间隔一下-->
	<div class="weui-cells" style="margin-top: 0px" >
		<div class="weui-flex" style="line-height:1">
			<div class="weui-flex__item" style="margin-left: 10px">
				<h4 style="margin-bottom: 0px;color: grey" ><i class="fa fa-inbox fa-lg"></i>&nbsp;&nbsp;店铺打分</h4>
			</div>
		</div><br/>
		<div class="weui-flex" style="line-height:1" th:each="itemtype:${itemtype}">
			<div class="weui-flex__item" style="margin-left: 10px">
				<h4 style="margin-bottom: 0px" th:text="${itemtype.itemname+':'}"></h4>
			</div>
			<div class="weui-flex__item" >
				<div th:id="${itemtype.itemtype}" >
					<input type="image" name="imageField1" th:class="${itemtype.itemtype}"  src="/img/person/starlight.png" th:onclick="'javascript:ChangeState(1,\''+${itemtype.itemtype}+'\',\''+${itemtype.itemtype+'num'}+'\')'"  style="width: 27px;height: 27px"/>
					<input type="image" name="imageField1" th:class="${itemtype.itemtype}" src="/img/person/starlight.png" th:onclick="'javascript:ChangeState(2,\''+${itemtype.itemtype}+'\',\''+${itemtype.itemtype+'num'}+'\')'"   style="width: 27px;height: 27px"/>
					<input type="image" name="imageField1" th:class="${itemtype.itemtype}" src="/img/person/starlight.png" th:onclick="'javascript:ChangeState(3,\''+${itemtype.itemtype}+'\',\''+${itemtype.itemtype+'num'}+'\')'"   style="width: 27px;height: 27px"/>
					<input type="image" name="imageField1" th:class="${itemtype.itemtype}" src="/img/person/starlight.png" th:onclick="'javascript:ChangeState(4,\''+${itemtype.itemtype}+'\',\''+${itemtype.itemtype+'num'}+'\')'"  style="width: 27px;height: 27px"/>
					<input type="image" name="imageField1" th:class="${itemtype.itemtype}" src="/img/person/starlight.png" th:onclick="'javascript:ChangeState(5,\''+${itemtype.itemtype}+'\',\''+${itemtype.itemtype+'num'}+'\')'"   style="width: 27px;height: 27px"/>
				</div>
				<input th:id="${itemtype.itemtype+'num'}" th:data="${itemtype.itemid}" class="itemtype" type="hidden" value="5" size="1" maxlength="1"/>
			</div>
		</div>
	</div>
	<div class="weui-cells weui-cells_checkbox">
		<label class="weui-cell weui-check__label" for="noname">
			<div class="weui-cell__hd">
				<input type="checkbox" class="weui-check" name="checkbox1" id="noname" checked="checked"/>
				<i class="weui-icon-checked"></i>
			</div>
			<div class="weui-cell__bd ">
				<h4 style="color:grey;">匿名评论</h4>
			</div>
		</label>
		<input type="hidden" id="ifnoname" value="1"/><!--用来存储是否匿名的值-->
	</div>
	<div class="weui-btn-area" >
		<a class="weui-btn weui-cell_primary" type="button" onclick="submitcomment()" style="background-color: red;">提交评论</a>
	</div>
</div>
<!--存储门店编号-->
    <input type="hidden" th:id="chnid" th:value="${order.chnid}"/>

</body>
<script th:inline="javascript">
    /*<![CDATA[*/
    //加载图片(生成base64)
    $(function () {
        var index; //第几张图片
        $("#uploaderFiles").on("click", "li", function() {
            index = $(this).index();
            $("#galleryImg").attr("style", this.getAttribute("style"));
            $("#gallery").fadeIn(100);
        });
        $("#gallery").on("click", function() {
            $("#gallery").fadeOut(100);
        });
        //删除图片
        $(".weui-gallery__del").click(function() {
            $("#uploaderFiles").find("li").eq(index).remove();
			var num=parseInt($(".photonum").text())-1;
            $(".photonum").text(num);
        });
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        // 1024KB，也就是 1MB
        var maxSize = 3072 * 3072;
        // 图片最大宽度
        var maxWidth = 10000;
        // 最大上传图片数量
        var maxCount = 4;
        $('#uploaderInput').on('change', function (event) {
            var files = event.target.files;
            //console.log(files);return false;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }

            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                var reader = new FileReader();

                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {

                    $.alert("该类型不允许上传！", "警告！");
                    continue;
                }

                if (file.size > maxSize) {
                    //$.weui.alert({text: '图片太大，不允许上传'});
                    $.alert("图片太大，不允许上传", "警告！");
                    continue;
                }

                if ($('.weui-uploader__file').length >= maxCount) {
                    $.alert("最多只能上传"+maxCount+"张图片");
                    return;
                }
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    $.showLoading("正在加载中...");
                    //console.log(e);
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);

                        var obase64 = canvas.toDataURL('image/jpg',0.5);
                        var base64=obase64.split(",");
                        // 插入到预览区
                        var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(' + img.src + ')"><div class="weui-uploader__file-content"></div></li>');
                        $('#uploaderFiles').append($preview);
                        var num = $('.weui-uploader__file').length;
                        $('.photonum').text(num);
                        $.hideLoading();
                    };
                };
            }
        });
    });

    /*]]>*/
</script>
<script>
	/*评论字数减少*/
    $(function(){
        var max = 100;
        $('#textarea').on('input', function(){
            var text = $(this).val();
            var len = text.length;
            $('#count').text(len);
            if(len > max){
                var num = $('#textarea').val().substr(0, 100);
                $('#textarea').val(num);
                $.alert('您好,超字数限制！');
            }
        });
    });
    /*匿名评论被选中*/
    $('#noname').click(function(){
        if($(this).prop('checked')){
           $("#ifnoname").val(1);
        }else{
            $("#ifnoname").val(0);
        }
    });
	/*改变五角星*/
    function ChangeState(index,starinput,starnum){
        var i=0;
        $("."+starinput).each(function () {
            $(this).attr('src','/img/person/star.png');
        })
        $("."+starinput).each(function () {
		   $(this).attr('src','/img/person/starlight.png');
		   i++;
		   if(i==index){
		      return false;
		   }
       });
		$("#"+starnum).val(index);
    }



    /*提交*/
    function submitcomment() {
        var index=parseInt($(".photonum").text());
        var i=0;
        var oid=$("#oid").text();
        var list=[];
        if(index>0){
			$.showLoading("正在上传图片...");
			$(".weui-uploader__file").each(function () {
				var obase64=$(this).css("background-image");
				var base64=obase64.split(",");
				var hhhbase64=base64[0].split("/");
				var hhbase64=hhhbase64[1].split(";");
				var type=hhbase64[0];
				var data=base64[1];
                var filename=oid+i;
                var updata={
                    "data":data,
                    "fileName": filename, //文件名称
                    "type":type //图片格式
                };
                //ajax代码不是按顺序执行的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
				$.ajax({
					url: "http://apis.ikartek.com/v1/imageservice/image/upload",
					type: 'POST',
                    async: false,//同步提交，等ajax代码执行后再往下执行代码
                    data: JSON.stringify(updata),
					contentType: 'application/json',
					success: function(data){
                        list.push(data.data);
                        i++;
					},
					error: function(data){
						console.log(data);
						$.alert("上传图片失败,请重试或更换图片");
					}
				});
            });
			$.hideLoading();
		}
		var itemid = [];
		var num = [];
		$(".itemtype").each(function () {
			itemid.push($(this).attr("data"));
			num.push($(this).val());
		});

		var data = {
			itemid: itemid,
			num: num,
			oid: oid,
			servman: $("#servman").attr("data"),
			chnid: $("#chnid").val(),
			allcommentnum: $("#allcommentnum").val(),
			textarea: $("#textarea").val(),
			ifnoname: $("#ifnoname").val(),
			list: list
		};
        console.log(data);
		//这里异步提交
		mui.ajax('/person/savecomment',{
			data:{
				item:JSON.stringify(data)
			},
			dataType:'text',//服务器返回json格式数据
			type:'get',//HTTP请求类型
			success:function(data){
				if(data=="success"){
				    $.alert("提交评论成功!");
					location.href="/person/order";
				}
			},
			error:function (data) {
				console.log(data);
			}
		});
    }
</script>

</html>
